<script setup>
import { ref } from 'vue'
import { Coin,Document,Timer,ChatLineSquare  } from '@element-plus/icons-vue'
const dialogVisible = ref(false)

const radio1 = ref('New York')

const value = ref('')

const options = [
  {
    value: '餐饮',
    label: '餐饮',
  },
  {
    value: '购物',
    label: '购物',
  },
  {
    value: '娱乐',
    label: '娱乐',
  }
]

const value1 = ref('')


const defaultTime = new Date(2000, 1, 1, 12, 0, 0)

const shortcuts = [
  {
    text: 'Today',
    value: new Date(),
  },
  {
    text: 'Yesterday',
    value: () => {
      const date = new Date()
      date.setTime(date.getTime() - 3600 * 1000 * 24)
      return date
    },
  },
  {
    text: 'A week ago',
    value: () => {
      const date = new Date()
      date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
      return date
    },
  },
] 
const open = (row) => {
  console.log(row)
  dialogVisible.value = true
}
defineExpose({
  open
})
</script>

<template>
  
  <el-dialog
    v-model="dialogVisible"
    width="450"
    :before-close="handleClose"
  >
  <el-radio-group fill="#ffbd5a" v-model="radio1" size="large" class="center">
      <el-radio-button label="支出" value="New York" />
      <el-radio-button label="收入" value="Washington" />
    </el-radio-group>
    <el-form>

     <el-form-item>
        <div class="flex">
        <el-icon size="large" style="margin-right: 10px;"><Coin /></el-icon>
        <el-input placeholder="请输入金额"  />
      </div>
    </el-form-item>

    <el-form-item>
        <div class="flex-input">
        <el-icon size="large" style="margin-right: 10px;"><Document /></el-icon>
        <el-select v-model="value" placeholder="请选择分类" >
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </el-select>
      </div>
    </el-form-item>

    <el-form-item>
      
    <div class="flex-input" >
      <el-icon size="large" style="margin-right: 10px;"><Timer /></el-icon>
      <el-date-picker
      style="width: 300px;"
      clear-icon="true"
        v-model="value1"
        type="datetime"
        placeholder="选择日期时间"
        :default-time="defaultTime"
        :shortcuts="shortcuts"
      />
    </div>
 
    </el-form-item>

    <el-form-item>
        <div class="flex" style="margin-top: 3px;">
        <el-icon size="large" style="margin-right: 10px;"><ChatLineSquare /></el-icon>
        <el-input placeholder="备注"  />
      </div>
    </el-form-item>
    
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false" size="large">取消</el-button>
        <el-button type="primary" @click="dialogVisible = false" size="large">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
  
</template>


<style lang="scss" scoped>
.center {
  margin: 0 auto;
  display: flex;
  justify-content: center;
  height: 100%;
  width: 100%;
}
.flex{
  display: flex;
  align-items: center;
  height: 100%;
  width: 300px;
  margin-top: 10px;
  margin-left: 50px;
}
.flex-input{
  display: flex;
  align-items: center;
  height: 100%;
  width: 300px;
  margin-top: 5px;
  margin-left: 50px;
}
.dialog-footer{
  display: flex;
  justify-content: space-around;
}
</style>